<template>
<view>
<!-- 分销订单模块开始 -->
<!-- <view class='retail_order'>
  <view class='order_tab clearfix'>
    <view class="order_tab_list {{currentTab==0?'active':''}}" data-current="0" bindtap='clickTab'>全部订单</view>
    <view class="order_tab_list {{currentTab==1?'active':''}}" data-current="1" bindtap='clickTab'>未付款</view>
    <view class="order_tab_list {{currentTab==2?'active':''}}" data-current="2" bindtap='clickTab'>已付款</view>
    <view class="order_tab_list {{currentTab==3?'active':''}}" data-current="3" bindtap='clickTab'>已完成</view>
  </view>
  <view class="order_content"> 
 
<block wx:for="{{teamOrder}}">
    <view class='order_content_list'>
      <view class='header clearfix wrap'>
        <view class='buy_name'>{{item.nickname}}</view>
        <view class='is_pay' wx:if="{{item.status == 0}}">未付款</view>
        <view class='is_pay' wx:if="{{item.status == 1}}">已付款</view>
        <view class='is_pay' wx:if="{{item.status == 2}}">等待分成(已收货)</view>
        <view class='is_pay' wx:if="{{item.status == 3}}">已分成</view>
        <view class='is_pay' wx:if="{{item.status == 4}}">已取消</view>
      </view>
      <view class='details'>    
        <block wx:if="{{item.goods_list.length > 1}}">
         <view class='product_info clearfix wrap'   >                
                <image src='{{url}}/api/goods/goodsThumImages?goods_id={{item.goods_list[0].goods_id}}&width=400&height=400'                                 class='product_image'></image>
                <image src='{{url}}/api/goods/goodsThumImages?goods_id={{item.goods_list[1].goods_id}}&width=400&height=400'                                 class='product_image'></image>
                <view>...</view>   
                      
                 <view class='' style="float:right;">
                    <view class='product_content_title'>共{{item.goods_list.length}}种商品 <image class="next_icon" src='../../../images/distribut/qian@2x.png' ></image></view>                                      
                </view> 
             </view>
        </block>

        <block wx:else>               
                <view class='product_info clearfix wrap' wx:for="{{item.goods_list}}" wx:for-item="goods">
                <image src='{{url}}/api/goods/goodsThumImages?goods_id={{goods.goods_id}}&width=400&height=400' class='product_image'></image>
                <view class='product_content'>
                    <view class='product_content_title'>{{goods.goods_name}}</view>
                    <view class='norms'>{{goods.spec_key_name}}</view>
                    <view class='price'>
                    <view class='price_number' style='float:left'>￥{{goods.member_goods_price}}</view>
                    <view class='product_number' style='float:right'>x{{goods.goods_num}}</view>
                    </view>
                </view>
                </view>
        </block>

        <view class='product_detail wrap'>
          <view class='order_num'>
            <view class='order_num_content' style='float:left'>订单号：{{item.order_sn}}</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 1}}" >分销等级：一级分销商</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 2}}">分销等级：二级分销商</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 3}}">分销等级：三级分销商</view>
          </view>
          <view class='order_time'>下单时间：{{item.create_time}}</view>
          <view class='product_total' style='float:left'>共{{item.num}}件商品<text>￥{{item.goods_price}}</text></view>
          <view class='product_charge' style='float:right'>获得佣金<text>￥{{item.money}}</text></view>
        </view>
        <view class='divided'></view>
      </view>
    </view>
     </block>
  </view>
</view> -->
<!-- 分销订单模块结束 -->

<view class="retail_order">
  <view class="order_tab clearfix">
    <view :class="'order_tab_list ' + (currentTab==0?'active':'')" data-current="0" @tap="clickTab">全部订单</view>
    <view :class="'order_tab_list ' + (currentTab==1?'active':'')" data-current="1" @tap="clickTab">未付款</view>
    <view :class="'order_tab_list ' + (currentTab==2?'active':'')" data-current="2" @tap="clickTab">已付款</view>
    <view :class="'order_tab_list ' + (currentTab==3?'active':'')" data-current="3" @tap="clickTab">已完成</view>
  </view>
  <view class="order_content">  
<block v-for="(item, index) in teamOrder" :key="index">
    <view class="order_content_list">
      <view class="header clearfix wrap">
        <view class="buy_name">{{item.nickname}}</view>
        <view class="is_pay" v-if="item.status == 0">未付款</view>
        <view class="is_pay" v-if="item.status == 1">已付款</view>
        <view class="is_pay" v-if="item.status == 2">等待分成(已收货)</view>
        <view class="is_pay" v-if="item.status == 3">已分成</view>
        <view class="is_pay" v-if="item.status == 4">已取消</view>
      </view>
      <view class="details">    
        <block v-if="item.goods_list.length > 1">
         <view class="product_info clearfix wrap">                
                <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_list[0].goods_id + '&width=400&height=400'" class="product_image"></image>
                <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_list[1].goods_id + '&width=400&height=400'" class="product_image"></image>
                <view>...</view>   
                      
                 <view class style="float:right;">
                    <view class="product_content_title">共{{item.goods_list.length}}种商品 <image class="next_icon" src="/static/images/distribut/qian@2x.png"></image></view>                                      
                </view> 
             </view>
        </block>

        <block v-else>               
                <view v-for="(goods, index2) in item.goods_list" :key="index2" class="product_info clearfix wrap">
                <image :src="url + '/api/goods/goodsThumImages?goods_id=' + goods.goods_id + '&width=400&height=400'" class="product_image"></image>
                <view class="product_content">
                    <!-- <view class='product_content_title'>{{goods.goods_name}}</view>
                    <view class='norms'>{{goods.spec_key_name}}</view>
                    <view class='price'>
                    <view class='price_number' style='float:left'>￥{{goods.member_goods_price}}</view>
                    <view class='product_number' style='float:right'>x{{goods.goods_num}}</view>
                    </view> -->
                    <view class="top">
                      <!-- <view class="left">{{goods.goods_name}}</view> -->
                      <view class="right">
                        <view class="price">￥{{goods.member_goods_price}}</view>
                        <view class="num">x{{goods.goods_num}}</view>
                      </view>
                    </view>
                    <view class="bottom">
                        规格：{{goods.spec_key_name==""||goods.spec_key_name==undefined?"--":goods.spec_key_name}}
                    </view>
                </view>
                </view>
        </block>

        <view class="product_detail wrap">
          <!-- <view class='order_num'>
            <view class='order_num_content' style='float:left'>订单号：{{item.order_sn}}</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 1}}" >分销等级：一级分销商</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 2}}">分销等级：二级分销商</view>
            <view class='order_num_rank' style='float:right' wx:if="{{item.level == 3}}">分销等级：三级分销商</view>
          </view>
          <view class='order_time'>下单时间：{{item.create_time}}</view>
          <view class='product_total' style='float:left'>共{{item.num}}件商品<text>￥{{item.goods_price}}</text></view>
          <view class='product_charge' style='float:right'>获得佣金<text>￥{{item.money}}</text></view> -->
          <view class="line">
            <view class="left">订单号：</view>
            <view class="right">201911080545571868</view>
          </view>
          <view class="line">
            <view class="left">分销等级：</view>
            <view class="right">二级分销商</view>
          </view>
          <view class="line">
            <view class="left">下单时间：</view>
            <view class="right">2019-11-08 08:05:45</view>
          </view>
          <view class="line bottom">
            <text>共1件商品 实付款：</text>￥10.00<text>获得佣金：</text>￥10.00
          </view>
        </view>
        <!-- <view class='divided'></view> -->
      </view>
    </view>
     </block>
  </view>
</view>
<!-- 分销订单模块结束 -->
<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block data-type="template" data-is="distributMenu" data-attr="page:page">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <!-- 我的分销底部导航 -->
    <view class="tpd-footer tpd-footer1">
        <view hover-class="none" @tap.stop="distributTopages" data-idx="0" :class="page == 0?'tpd-footer-select':''"><image :src="page == 0?'/images/distribut/seller_red@2x.png':'/images/distribut/seller_black@2x.png'"></image><text>分销中心</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="1" :class="page == 1?'tpd-footer-select':''"><image style="width:59rpx;" :src="page == 1?'/images/distribut/team_red@2x.png':'/images/distribut/team_black@2x.png'"></image><text>我的团队</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="2" :class="page == 2?'tpd-footer-select':''"><image :src="page == 2?'/images/distribut/money_red@2x.png':'/images/distribut/money_black@2x.png'"></image><text>我的账户</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="3" :class="page == 3?'tpd-footer-select':''"><image :src="page == 3?'/images/distribut/order_red@2x.png':'/images/distribut/order_black@2x.png'"></image><text>分销订单</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="4" :class="page == 4?'tpd-footer-select':''"><image :src="page == 4?'/images/distribut/shop_red@2x.png':'/images/distribut/shop_black@2x.png'"></image><text>我的网店</text></view>
    </view>
  </view>
</block>
</view>
</template>

<script>
//index.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var common = require("../../../utils/common.js");
var util = require("../../../utils/util.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      currentTab: 0,
      currentPage: 1,
      teamOrder: null,
      page: 3,
      url: setting.url
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, '', 'teamOrder');
    this.getTeamOrder(this.currentTab);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.getTeamOrder(this.currentTab);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.getTeamOrder(this.currentTab);
  },
  methods: {
    getTeamOrder: function (status) {
      var that = this;
      var where = '';

      if (status == 1) {
        where = 0;
      } else if (status == 2) {
        where = '1,2';
      } else if (status == 3) {
        where = 3;
      }

      load.request('/api/Distribut/order_list?status=' + where + '&p=' + that.currentPage, function (res) {
        that.currentPage++;

        if (res.data.result) {
          res.data.result.forEach(function (val, index, arr) {
            val.create_time = util.format(val.create_time, 'yyyy-M-d');
          });
        }
      });
    },
    //事件处理函数
    clickTab: function (e) {
      var that = this;

      if (that.currentTab != e.target.dataset.current) {
        that.setData({
          currentTab: e.target.dataset.current
        });
        that.resetData();
        that.getTeamOrder(e.target.dataset.current);
      }
    },
    distributTopages: function (e) {
      common.todistribut(e.currentTarget.dataset.idx, this.page);
    },
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.teamOrder = null;
      this.currentPage = 1;
    }
  }
};
</script>
<style>
.next_icon {
  float: right;
  width: 18rpx;
  height: 32rpx;
  margin-top: 10rpx;
  margin-right: 15rpx;
  margin-left:10rpx;
}
page {
  background-color: #f5f5f5
}
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #f3f3f3;
}
.show {
  display: block;
}
.hidden {
  display: none;
}
.retail_order {
  background-color: #f5f5f5;
  margin-bottom: 85rpx;
}
.retail_order .order_tab {
  background: #ffffff;
  border-bottom: 1px solid #f3f3f3;
}
.retail_order .order_tab .order_tab_list {
  float: left;
  width: 25%;
  height: 80rpx;
  line-height: 76rpx;
  text-align: center;
  color: #333;
  font-size: 28rpx;
}
.retail_order .order_tab .order_tab_list.active {
  color: #ff6a00;
  position: relative;
  font-weight: bold;
}
.retail_order .order_tab .order_tab_list.active::after {
  content: '';
  position: absolute;
  width: 50rpx;
  height: 4rpx;
  border-radius: 2rpx;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6a00;
}
.retail_order .order_content .order_content_list{
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  background: #fff;
}
.retail_order .order_content .order_content_list .header .buy_name {
  float: left;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #666666;
}
.retail_order .order_content .order_content_list .header .is_pay {
  float: right;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  color: #2DCC9A;
}
.retail_order .order_content .order_content_list .details .product_info {
  height: 190rpx;
  border-bottom: 1px solid #f3f3f3;
  padding: 20rpx 0!important;
  margin: 0 20rpx;
  width: auto!important;
  box-sizing: border-box;
}
.retail_order .order_content .order_content_list .details .product_image {
  float: left;
  height: 150rpx;
  width: 150rpx;
  border-radius: 5rpx;
}
.retail_order .order_content .order_content_list .details .product_content {
  margin-left: 160rpx;
}
.product_content{
    width: 500rpx;
}
.product_content .top{
    width: 100%;
    height: 90rpx;
    box-sizing: border-box;
}
.product_content .top .left{
    width: 330rpx;
    float: left;
    color: #666666;
    margin: 10rpx 0rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.product_content .top .right{
    width: 150rpx;
    float: right;
    margin: 10rpx 0rpx;
    color:#999999;
    font-size: 22rpx;
}
.product_content .top .right .price{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.product_content .top .right .num{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.product_content .bottom{
    color: #999999;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 22rpx;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}
.retail_order .order_content .order_content_list .details .product_content .product_content_title {
  font-size: 26rpx;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.retail_order .order_content .order_content_list .details .product_content .norms {
  color: #999;
  font-size: 22rpx;
  margin-top: 5rpx;
}
/*.retail_order .order_content .order_content_list .details .product_content .price {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #1d1d1d;
}*/
.retail_order .order_content .order_content_list .details .product_detail {
  height: 229rpx;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
}
.product_detail .line{
  height: 55rpx;
  line-height: 55rpx;
}
.product_detail .line .left{
  width: 49.5%;
  float: left;
  text-align: left;
  font-size: 24rpx;
  color: #999999;
}
.product_detail .line .right{
  width: 49.5%;
  float: right;
  text-align: right;
  font-size: 24rpx;
  color: #666666;
}
.product_detail .bottom{
  text-align: right;
  color: #ff6a00;
  font-size: 28rpx;
  line-height: 45rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product_detail .bottom text{
  margin:0rpx 10rpx 0 20rpx;
  font-size: 24rpx;
  color: #666;
}
.retail_order .order_content .order_content_list .details .product_detail .order_num {
  font-size: 22rpx;
  color: #666;
  height: 64rpx;
  line-height: 64rpx;
}
.retail_order .order_content .order_content_list .details .product_detail .order_time {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.retail_order .order_content .order_content_list .details .product_detail .product_total,.product_charge {
  font-size: 26rpx;
  color: #1f1f1f;
}
.product_total text, .product_charge text {
  font-weight: bold;
  color: #ff6a00;
  margin-left: 10rpx;
}
.retail_order .order_content .order_content_list .details .divided {
  height: 15rpx;
  width: 100%;
  background-color: #f5f5f5;
}
.store-logo{
    height: 30rpx;
    width: 30rpx;
    border-radius: 25%;
    margin-right:10rpx;
    vertical-align:top;
    position: relative;
    top: 30rpx;
}
</style>